<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <script src="../blued/static/jquery/jquery-2.2.1.js"></script>
    <script>
        $(document).ready(function(){
          $("button").click(function(){
            $("p:first").removeClass("intro").addClass('main');
          });
        });
        $(function(){
    $("#test li").click(function() {
        $(this).siblings('li').removeClass('selected');  // 删除其他兄弟元素的样式
        $(this).addClass('selected');                            // 添加当前元素的样式
    });
});
    </script>

<style type="text/css">
      .selected{font-weight:bold; background: #ff99cc; color:#fff;}
.intro
{
font-size:120%;
color:red;
}
.main
{
font-size:90%;
color:blue;
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>this is a button</button>
<ul id="test">
    <li>Glen</li>
    <li>Tane</li>
    <li>John</li>
</ul>
</body>
</html>